<template>
	<el-dialog
		:title="`编辑${businessModelFn(userInfo.businessModel)}线玩家限红模版`"
		:visible="visible"
		width="520px"
		class="rempadding"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<el-form
			ref="editForm"
			:rules="rules"
			:model="editData"
			label-width="140px"
		>
			<el-form-item :label="`场馆名称:`">体育场馆</el-form-item>
			<el-form-item :label="`玩家账号:`">
				{{ parentData.userName }}
			</el-form-item>
			<el-form-item :label="`所属总代:`">
				{{ parentData.topProxyName }}
			</el-form-item>
			<el-form-item :label="`已分配的赛事模板:`">
				{{ curData.templateName }}
			</el-form-item>
			<el-form-item :label="`可选择赛事模板:`">
				<el-radio-group v-model="editData.templateId">
					<el-radio
						class="mb15"
						v-for="item of templateList"
						:key="item.templateId"
						:label="item.templateId"
					>
						{{ item.templateName }}
					</el-radio>
				</el-radio-group>
			</el-form-item>
			<div class="td-test">其他限制(非必填)：</div>
			<el-form-item :label="`投注延迟:`">
				<div class="flex felx-box">
					<el-tooltip
						class="item"
						effect="dark"
						:content="'会员投注的延迟(秒)'"
						placement="top-start"
					>
						<i class="el-icon-question"></i>
					</el-tooltip>
					<el-input
						v-model="editData.specialBettingLimitTime"
						clearable
						maxLength="2"
						v-input="{ name: 'intp' }"
						:placeholder="'非必填'"
					></el-input>
					<span>秒</span>
				</div>
			</el-form-item>
			<el-form-item :label="`TY赔率分组:`">
				<div class="flex felx-box">
					<el-tooltip
						class="item"
						effect="dark"
						:content="
							'会员在不同赔率分组，可见赔率不同。A赔率最低、B赔率一般、C赔率最高。'
						"
						placement="top-start"
					>
						<i class="el-icon-question"></i>
					</el-tooltip>
					<el-select
						v-model="editData.marketLevel"
						:placeholder="'非必填'"
					>
						<el-option
							v-for="item in marketLevelList"
							:key="item.id"
							:label="item.description"
							:value="item.id"
						></el-option>
					</el-select>
				</div>
			</el-form-item>
			<el-form-item :label="`限额百分比:`">
				<div class="flex felx-box">
					<el-tooltip
						class="item"
						effect="dark"
						:content="
							'会员实际投注限额=投注限额*限额百分比。例:会员投注限额=1,000,000，限额百分比配置为10.00%，则会员实际投注限额=100,000'
						"
						placement="top-start"
					>
						<i class="el-icon-question"></i>
					</el-tooltip>
					<el-input
						v-model="editData.percentageLimit"
						clearable
						maxLength="3"
						v-input="{ name: 'intp' }"
						:placeholder="'非必填'"
					></el-input>
					<span>%</span>
				</div>
			</el-form-item>
			<el-form-item :label="`备注(非必填):`">
				<el-input
					v-model="editData.applyRemark"
					placeholder="请输入,最多500个字"
					maxlength="500"
					show-word-limit
					:rows="4"
					clearable
					type="textarea"
					v-input="{ name: 'noEmpty' }"
				></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleClose">
				{{ $t('common.cancel') }}
			</el-button>
			<el-button
				type="primary"
				:disabled="editLoading"
				:loading="editLoading"
				@click="submitEdit"
			>
				{{ $t('common.sure') }}
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'

export default {
	components: {},
	mixins: [list],
	props: {
		curData: {
			type: Object,
			default: {}
		},
		visible: {
			type: Boolean,
			default: false
		},
		userInfo: { type: Object, default: {} },
		parentData: { type: Object, default: () => ({}) },
		handleVisible: {
			type: Object,
			default: () => {}
		}
	},
	computed: {
		rules() {
			return {
				creditLevel: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: 'blur'
					}
				],
				creditLevelName: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	data() {
		return {
			businessModelData: '',
			templateList: [],
			editData: {},
			marketLevelList: [
				{
					name: 'A',
					value: 'A盘'
				},
				{
					name: 'B',
					value: 'B盘'
				},
				{
					name: 'C',
					value: 'C盘'
				}
			],
			editLoading: false,
			tableHeight: 480,
			data: []
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		businessModelFn(val) {
			const businessModel = {
				'0': '信用现金',
				'1': '现金',
				'2': '信用'
			}
			return businessModel[val]
		},
		// 获取代理账号信息
		getData() {
			this.editLoading = true

			this.$api
				.batchQueryTyMemberLimitRed({
					memberIds: [this.parentData.userId],
					merchantId: this.parentData.merchantId
				})
				.then((res) => {
					this.editLoading = false
					this.editData = res.data && { ...res.data[0] }
					this.editData.percentageLimit =
						this.editData.percentageLimit &&
						Number(this.editData.percentageLimit * 100)
				})
				.catch(() => {
					this.editLoading = false
				})
			this.$api
				.proxyTyLimitRedList({
					merchantId: this.parentData.merchantId,
					templateId: this.curData.templateId
				})
				.then((res) => {
					this.marketLevelList = res.data.marketLevelDtos
					this.templateList = res.data.templateDtos
				})
		},
		submitEdit() {
			if (
				this.editData.specialBettingLimitTime &&
				typeof Number(this.editData.specialBettingLimitTime) ===
					'number' &&
				!(
					Number(this.editData.specialBettingLimitTime) >= 1 &&
					Number(this.editData.specialBettingLimitTime) <= 11
				)
			) {
				return this.$message.error(
					'投注延迟必须大于等于1并且小于等于11的整数'
				)
			}
			if (
				this.editData.percentageLimit &&
				typeof Number(this.editData.percentageLimit) === 'number' &&
				!(
					Number(this.editData.percentageLimit) >= 1 &&
					Number(this.editData.percentageLimit) <= 100
				)
			) {
				return this.$message.error('限额百分比必须是1%-100%的正整数')
			}
			// 如果投注延迟没有填写的时候,默认传1
			if (!this.editData.specialBettingLimitTime) {
				this.editData.specialBettingLimitTime = 1
			}
			this.editLoading = true
			this.$api
				.batchTyUpdateLimitRed({
					memberIds: [this.parentData.userId],
					...this.editData,
					merchantId: this.parentData.merchantId
				})
				.then((res) => {
					this.$message.success('操作成功')
					this.$emit('update:visible', false)
					this.$emit('handleVisible')
				})
				.catch(() => {
					this.editLoading = false
				})
		},
		handleClose() {
			this.$refs.editForm.resetFields()
			this.$emit('update:visible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .rempadding .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;
	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentBox,
	form {
		padding: 0 20px;
	}
}

::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
.td-test {
	margin-bottom: 10px;
	font-size: 14px;
}
.felx-box {
	align-items: center;
	gap: 5px;
}
</style>
